<template>
  <view class="content">
    <!--   添加选项，点击时显示 -->
    <view class="in_content" :class="{'active':active&&plus}">
      <view class="tabbar-box-wrap">
        <view class="tabbar-box">
          <view class="tabbar-box-item" @click="goToPage('/pages/lend-edit/lend-edit?id=-1')">
            <image class="box-image" src="../../../static/img/out.png" mode="aspectFit"></image>
            <text class="explain">出租</text>
          </view>
        </view>
      </view>
    </view>

    <u-tabs
        :list="list_tab"
        :is-scroll="false"
        :current="current"
        bar-width="50"
        active-color="#30B1B7"
        @change="change"
    ></u-tabs>
    <view v-if="current === 0">
      <Lend></Lend>
    </view>
    <view v-if="current === 1">
      <Borrow></Borrow>
    </view>
  </view>

</template>

<script>

import Tabbar from "@/components/tabbar/index.vue";
import {outlayAddApi, outlayDeleteApi, outlayListApi, userLoginApi} from "@/network/api/api";
import {setToken} from "@/common/auth";
import Borrow from "@/pages/borrow/borrow.vue";
import Lend from "@/pages/lend/lend.vue";

export default {
  components: {Borrow, Tabbar, Lend},
  data() {
    return {
      list_tab: [
        {
          name: "我的出租",
        },
        {
          name: "我的租入",
        }
      ],
      current: 0,


      active: false,
      plus: false,
      list: [],
      disabled: false,
      btnWidth: 180,
      show: false,
      options: [
        {
          text: '编辑',
          style: {
            backgroundColor: '#007aff'
          }
        },
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ]
    };
  },
  onLoad() {
  },
  onShow() {
    console.log(2)
    uni.$emit("refresh-lend", '');
    setTimeout(() => {
      this.active = true;
    }, 500);
  },
  onTabItemTap: function (item) {
    return
    if (this.active) {
      this.plus = !this.plus;
    }
    // if (this.active) {
    //   this.plus = !this.plus;
    //   if(this.plus){
    //     uni.navigateTo({
    //       url:"/pages/oulay-edit/oulay-edit?id=-1"
    //     })
    //   }
    // }
  },

  onHide() {
    this.active = false;
    this.plus = false;
  },
  methods: {
    change(index) {
      console.log(index)
      this.current = index;
      //如报错则用this.current = index代替上行
    },
    getData() {
      const _this = this;
      outlayListApi().then(res => {
        console.log(res)
        if (res.code === 200) {
          _this.list = res.data;
        } else {
          uni.showToast({
            title: "登录失败",
            icon: 'none'
          });
        }
      }).catch(err => {
        console.log(err)
      })
    },
    click(index, index1) {
      const _this = this
      if (index1 == 1) {
        this.list.splice(index, 1);
        // this.$u.toast(`删除了第${index}个cell`);
        outlayDeleteApi({id: this.list[index].id}).then(res => {
          if (res.code === 200) {
            _this.getData()
          } else {

          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.list[index].show = false;
        console.log(this.list[index].id)
        uni.navigateTo({
          url: "/pages/oulay-edit/oulay-edit?id=" + this.list[index].id
        })
      }
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      })
    },
    goToPage(url) {
      if (!url) return;
      uni.navigateTo({
        url
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/*swipe*/
.item {
  display: flex;
  padding: 20rpx;
}

image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.title-wrap {
  width: 80%;
}

.category-wrap {
  width: 10%;
}

.amount-wrap {
  width: 30%;
}

.image-wrap {
  display: flex;
  margin-left: 50rpx;
  width: 100%;
  padding-bottom: 10rpx;
}

.title {
  text-align: left;
  font-size: $u-content-size;
  //color: $u-content-color;
  margin-top: 20rpx;
  color: #08374A;
}

.amount {
  text-align: left;
  font-size: $u-title-size;
  color: #08374A;
  font-weight: 500;
  margin-top: 20rpx;
}

.remark {
  text-align: left;
  font-size: $u-mini-content-size;
  color: $u-content-color;
  margin-top: 20rpx;
}

/*content*/
.content {
  padding: 0;
}

.in_content {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* #ifdef H5 */
  height: calc(100vh - var(--window-bottom) - var(--window-top));
  /* #endif */
  /* #ifndef H5 */
  height: 100vh;
  /* #endif */
  transition: opacity 0.3s;
  background: rgba(153, 153, 153, 0.62);
  opacity: 0;

  &.active {
    opacity: 1;
    z-index: 1;
  }

  .logo {
    position: relative;
    margin-top: -400upx;
    width: 200upx;
    height: 200upx;
    // z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;

    &.active {
      opacity: 1;
    }
  }
}

.tabbar-box-wrap {
  position: absolute;
  width: 100%;
  padding: 50upx;
  box-sizing: border-box;
  bottom: 0;
  left: 0;

  .tabbar-box {
    position: relative;
    display: flex;
    width: 100%;
    background: #fff;
    border-radius: 20upx;
    padding: 15upx 20upx;
    box-sizing: border-box;
    z-index: 2;
    box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);

    &:after {
      content: '';
      position: absolute;
      bottom: -16upx;
      left: 0;
      right: 0;
      margin: auto;
      width: 50upx;
      height: 50upx;
      transform: rotate(45deg);
      background: #fff;
      z-index: 1;
      box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
    }

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 20upx;
      z-index: 2;
    }

    .tabbar-box-item {
      // position: relative;
      width: 100%;
      z-index: 3;
      margin: 10upx;
      color: $uni-color-subtitle;
      text-align: center;
      font-size: $uni-font-size-base;

      .box-image {
        width: 100%;
        height: $uni-img-size-lg;
      }
    }
  }
}
</style>
